<template>
  <el-dialog :modelValue="modelValue"
             title="审核详情"
             :draggable="true"
             :destroy-on-close="true"
             @close="onClose"
             width="68%">
    <el-form :inline="true" :model="form" class="demo-form-inline">

      <el-row>
        <el-form-item label="法人">
          <el-input v-model="form.legalPerson" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="店铺名称">
          <el-input v-model="form.storeName" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="form.mobile" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input v-model="form.userName" placeholder="" clearable :disabled="true"/>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="身份证号">
          <el-input v-model="form.idNumber" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="银行卡号（储蓄卡）">
          <el-input v-model="form.cardNumber" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="银行卡预留手机号">
          <el-input v-model="form.reservedNumber" placeholder="" clearable :disabled="true"/>
        </el-form-item>

      </el-row>


      <el-row>
        <el-form-item label="开户银行">
          <el-input v-model="form.depositBank" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="主营分类名">
          <el-input v-model="form.categoryName" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="小蜜蜂名称">
          <el-input v-model="form.beesName" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="审核状态">
          <el-button v-if="form.status === '0'" type="warning" plain>待审核</el-button>
          <el-button v-else-if="form.status === '1'" type="warning" plain>审核成功</el-button>
          <el-button v-else-if="form.status === '2'" type="danger" plain>审核失败</el-button>
        </el-form-item>

      </el-row>


      <el-row>
        <el-form-item label="所在地区">
          <el-input v-model="form.area" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-input v-model="form.address" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="申请说明">
          <el-input v-model="form.explainText" placeholder="" clearable :disabled="true"/>
        </el-form-item>

      </el-row>


      <el-row>
        <el-form-item label="营业执照">
          <el-image style="width: 100px; height: 100px" :src="form.businessUrl"/>
        </el-form-item>


        <el-form-item label="门脸照片">
          <el-image style="width: 100px; height: 100px" :src="form.shopFrontUrl"/>
        </el-form-item>

      </el-row>


      <el-row>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime" placeholder="" clearable :disabled="true"/>
        </el-form-item>

        <el-form-item label="更新时间">
          <el-input v-model="form.updateTime" placeholder="" clearable :disabled="true"/>
        </el-form-item>

      </el-row>


      <el-form-item label="未通过审核次数">
        <el-input v-model="form.failNumber" placeholder="" clearable :disabled="true"/>
      </el-form-item>

      <el-form-item label="最近未通过审核原因">
        <el-input v-model="form.latelyFailCause" placeholder="" clearable :disabled="true"/>
      </el-form-item>

      <el-form-item label="审核人">
        <el-input v-model="form.auditor" placeholder="" clearable :disabled="true"/>
      </el-form-item>


      <div  slot="footer" class="dialog-footer">
        <el-popconfirm v-if="form.status === '0'" title="确定通过吗?"
                       confirm-button-text="确定"
                       cancel-button-text="取消"
                       @Confirm="pass()">
          <template #reference>
            <el-button type="success">通过审核</el-button>
          </template>
        </el-popconfirm>

        <el-button v-if="form.status === '0'" type="danger" @click="onFila">审核不通过</el-button>

        <el-button @click="cancel">取消</el-button>
      </div>

    </el-form>
  </el-dialog>

  <el-dialog
      :modelValue="onNotByReason"
      title="不通过原因"
      :draggable="true"
      :destroy-on-close="true"
      @close="onFailClose">

    <el-form>
      <el-form-item>
        <el-input v-model="failCause" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="notPass">Create</el-button>
        <el-button @click="onNotByReasonCancel">Cancel</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

</template>

<script setup>
import {reactive, ref} from 'vue'
import {Delete} from "@element-plus/icons-vue";
import {useRequest} from "vue-request";
import {merchantApplicationFila, merchantApplicationSuccess} from "@/api/check/supplier.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  //控制显示
  modelValue: '',
  form: {},
})

const emit = defineEmits([
  'update:modelValue',
  'update:form',
  'search'
])

function onClose() {
  reset()
  emit('update:modelValue', false)
}

//取消
function cancel() {
  reset()
  emit('update:modelValue', false)
}


// 表单重置
function reset() {
  // eslint-disable-next-line no-sequences
  // (props.menuPerm.menuNodeAll = false),
  //     (props.menuPerm.menuExpand = false),
  //     (props.form = {
  //       id: undefined,
  //       roleName: undefined,
  //       roleKey: undefined,
  //       roleSort: 0,
  //       status: '0',
  //       menuIds: [],
  //       remark: undefined
  //     })
  // resetForm(props.form)
  emit('update:form', {
    supplierInfoId: undefined,
    legalPerson: '',
    storeName: '',
    mobile: '',
    idNumber: '',
    businessUrl: '',
    status: '',
    userName: '',
    categoryName: '',
    explainText: '',
    area: '',
    beesName: '',
    address: '',
    shopFrontUrl: '',
    cardNumber: '',
    reservedNumber: '',
    depositBank: '',
    failNumber: 0,
    latelyFailCause: '',
    auditor: undefined,
    createTime: undefined,
    updateTime: undefined
  })
}

let passParam = {}

const {runAsync: passSuccess} = useRequest((d) => merchantApplicationSuccess(d), {
  manual: true
})

//审核通过
async function pass() {
  //组合参数返回
  passParam = {
    supplierInfoId: props.form.supplierInfoId,
    legalPerson: props.form.legalPerson,
    storeName: props.form.storeName,
    idNumber: props.form.idNumber,
    address: props.form.address
  }
  //  (passParam)
  await passSuccess(passParam).then((res) => {
    if (res.data.code === 0) {
      reset()
      ElMessage({
        message: '审核成功！',
        type: 'success',
      })
      emit('update:modelValue', false)
      emit('search')
    } else {
      ElMessage({
        message: '审核失败！',
        type: 'error',
      })
    }
  })
  passParam = {}
}

const {runAsync: passFila} = useRequest((d) => merchantApplicationFila(d), {
  manual: true
})

let failCause = ref("")

let onNotByReason = ref(false)

function onNotByReasonCancel() {
  onNotByReason.value = false
  failCause.value = ""
}

function onFila() {
  onNotByReason.value = true
}

function onFailClose() {
  onNotByReason.value = false
}

//审核不通过
async function notPass() {
  //组合参数返回
  passParam = {
    supplierInfoId: props.form.supplierInfoId,
    legalPerson: props.form.legalPerson,
    storeName: props.form.storeName,
    idNumber: props.form.idNumber,
    address: props.form.address,
    failCause: failCause.value,
  }
  await passFila(passParam).then((res) => {
    if (res.data.code === 0) {
      reset()
      ElMessage({
        message: '审核成功！',
        type: 'success',
      })
      onNotByReason.value = false
      emit('update:modelValue', false)
      emit('search')
    } else {
      ElMessage({
        message: '审核失败！',
        type: 'error',
      })
    }
  })
  passParam = {}
  failCause.value = ""
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>